<template>
    <div>
        <div class="downBg">
            <div class="logoBox">
                <div class="logoImg"></div>
            </div>
            <div class="intro">
                <h2>都是优质好商品</h2>
                <div class="divide"></div>
                <div class="content">平台为用户提供精选好商品，做到物美价廉把好商品推送给自己好友，就可获得平台奖励哦还有更多优惠，一起加入吧！</div>
            </div>
            <div class="downBtnBox">
                <a class="btn android" v-if="isWeixin" @click="toValidateIsOpenPopup" target="_blank"></a>
                <a class="btn android" v-else :href="androidDownloadUrl" target="_blank"></a>
                <a class="btn ios" v-if="isWeixin" @click="toValidateIsOpenPopup" target="_blank"></a>
                <a class="btn ios" v-else-if="iosDownloadUrl" :href="iosDownloadUrl" target="_blank"></a>
                <a class="btn ios" v-else target="_blank"></a>
                <p class="downloadTip" v-if="!iosDownloadUrl">iOS暂未开通，敬请期待！</p>
            </div>
            <div class="maskPopup" v-if="showPopup" @click="hidePopup">
                <div class="picShow"></div>
            </div>
        </div>
    </div>
</template>

<script>
import {ajax, getDownloadUrl} from '../../data/wap-service.js'
export default {
    data(){
        return {
            iosDownloadUrl: '',
            androidDownloadUrl: '',
            showPopup: false,
            isWeixin: false
        }
    },

    mixins:[ajax],

    created(){
        this.getDownloadUrl()
        this.toValidateAgent()
    },

    methods:{
        getDownloadUrl(){
            this.doajax(getDownloadUrl, {}, res => {
                this.iosDownloadUrl = res.iosDownloadUrl;
                this.androidDownloadUrl = res.androidDownloadUrl;
            })
        },

        toValidateAgent(){
            let ua = navigator.userAgent.toLowerCase(); 
            if(ua.match(/MicroMessenger/i)=="micromessenger"){          
                this.showPopup = true;      
                this.isWeixin = true;
            }else{
                this.showPopup = false;      
                this.isWeixin = false;
            }
        },

        toValidateIsOpenPopup(){
            if(this.isWeixin){
                this.showPopup = true
            }
        },

        hidePopup(){
            this.showPopup = false;
        }
    }
}
</script>

<style>
h2{margin: 0px;}
.downBg{position:fixed; top: 0; right: 0; bottom: 0; left: 0; background: url(../../assets/download/bg.png) no-repeat; background-size: 7.5rem 100%;}
.downBg .logoBox{position: absolute; top: 1.9rem; left: 0; width: 100%;}
.downBg .logoBox .logoImg{width: 1.5rem; height: 1.5rem; margin: 0 auto; background: url(../../assets/download/logo.png) no-repeat; background-size: 1.5rem 1.5rem;}

.downBg .intro{position: absolute; top: 4.2rem; left: 0; width: 100%; text-align: center; font-family: '黑体'}
.downBg .intro h2{font-size: .36rem; color: #ffffff; margin-bottom: .42rem; font-weight: 400; letter-spacing: .08rem;}
.downBg .intro .divide{width: .8rem; height: .02rem; background: #ffffff; margin:0 auto .46rem;}
.downBg .intro .content{width: 5.5rem; margin: 0 auto; font-size: .24rem; color: rgba(255,255,255,.4); line-height: .36rem;}

.downBg .downBtnBox{position: absolute; top: 8.14rem; left: 0; width: 100%;}
.downBg .downBtnBox .btn{display: block; width: 3.75rem; height: .85rem; margin: 0 auto .5rem;}
.downBg .downBtnBox .android{background: url(../../assets/download/android.png) no-repeat; background-size: 3.75rem .85rem;}
.downBg .downBtnBox .ios{background: url(../../assets/download/iphone.png) no-repeat; background-size: 3.75rem .85rem;}
.downBg .downBtnBox .downloadTip{font-size: .28rem; color: #ffffff; text-align: center;}

.downBg .maskPopup{position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,.6);}
.downBg .maskPopup .picShow{width: 5rem; height: 4.7rem; float:right; margin-right: .3rem; background: url(../../assets/download/tipContent.png) no-repeat; background-size: 5rem 4.7rem;}
</style>
